// 仪表盘交互脚本

document.addEventListener('DOMContentLoaded', function() {
    // 模拟图表显示（简单的条形图）
    function createMockCharts() {
        // 访问趋势图表模拟
        const trendChart = document.querySelector('.charts .chart-container:first-child .chart-placeholder');
        if (trendChart) {
            trendChart.innerHTML = '';
            trendChart.style.display = 'flex';
            trendChart.style.alignItems = 'flex-end';
            trendChart.style.justifyContent = 'space-around';
            trendChart.style.paddingBottom = '20px';
            
            const data = [65, 59, 80, 81, 56, 55, 72];
            const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            
            data.forEach((value, index) => {
                const bar = document.createElement('div');
                bar.style.width = '30px';
                bar.style.height = `${value * 2}px`;
                bar.style.backgroundColor = '#3498db';
                bar.style.borderRadius = '4px 4px 0 0';
                bar.style.transition = 'height 1s ease';
                
                const label = document.createElement('div');
                label.style.textAlign = 'center';
                label.style.fontSize = '12px';
                label.style.color = '#666';
                label.style.marginTop = '5px';
                label.textContent = labels[index];
                
                const valueLabel = document.createElement('div');
                valueLabel.style.textAlign = 'center';
                valueLabel.style.fontSize = '12px';
                valueLabel.style.color = '#333';
                valueLabel.style.marginBottom = '5px';
                valueLabel.textContent = value;
                
                const container = document.createElement('div');
                container.appendChild(valueLabel);
                container.appendChild(bar);
                container.appendChild(label);
                
                // 延迟动画
                setTimeout(() => {
                    bar.style.height = `${value * 2}px`;
                }, 100 * index);
                
                trendChart.appendChild(container);
            });
        }
        
        // 用户分布图模拟（简单的饼图）
        const distributionChart = document.querySelector('.charts .chart-container:last-child .chart-placeholder');
        if (distributionChart) {
            distributionChart.innerHTML = '';
            distributionChart.style.position = 'relative';
            
            const canvas = document.createElement('canvas');
            canvas.width = 200;
            canvas.height = 200;
            canvas.style.display = 'block';
            canvas.style.margin = '0 auto';
            distributionChart.appendChild(canvas);
            
            const ctx = canvas.getContext('2d');
            const data = [35, 25, 20, 20];
            const colors = ['#3498db', '#2ecc71', '#f39c12', '#e74c3c'];
            let startAngle = 0;
            
            data.forEach((value, index) => {
                const sliceAngle = (value / 100) * 2 * Math.PI;
                ctx.beginPath();
                ctx.arc(100, 100, 80, startAngle, startAngle + sliceAngle);
                ctx.lineTo(100, 100);
                ctx.fillStyle = colors[index];
                ctx.fill();
                startAngle += sliceAngle;
            });
            
            // 添加图例
            const legend = document.createElement('div');
            legend.style.display = 'flex';
            legend.style.justifyContent = 'center';
            legend.style.gap = '15px';
            legend.style.marginTop = '15px';
            
            const categories = ['直接访问', '社交媒体', '搜索引擎', '外部链接'];
            colors.forEach((color, index) => {
                const item = document.createElement('div');
                item.style.display = 'flex';
                item.style.alignItems = 'center';
                item.style.fontSize = '12px';
                
                const colorBox = document.createElement('div');
                colorBox.style.width = '12px';
                colorBox.style.height = '12px';
                colorBox.style.backgroundColor = color;
                colorBox.style.marginRight = '5px';
                colorBox.style.borderRadius = '2px';
                
                item.appendChild(colorBox);
                item.appendChild(document.createTextNode(`${categories[index]} (${data[index]}%)`));
                legend.appendChild(item);
            });
            
            distributionChart.appendChild(legend);
        }
    }
    
    // 数字动画效果
    function animateNumbers() {
        const statNumbers = document.querySelectorAll('.stat-number');
        
        statNumbers.forEach(number => {
            const target = parseInt(number.textContent.replace(/,/g, '').split('分钟')[0]);
            const suffix = number.textContent.includes('分钟') ? '分钟' : '';
            let current = 0;
            const duration = 1500;
            const step = target / (duration / 16);
            
            const updateNumber = () => {
                current += step;
                if (current >= target) {
                    number.textContent = target.toLocaleString() + suffix;
                    return;
                }
                number.textContent = Math.floor(current).toLocaleString() + suffix;
                requestAnimationFrame(updateNumber);
            };
            
            updateNumber();
        });
    }
    
    // 监听统计卡片的悬停效果
    function addCardHoverEffects() {
        const cards = document.querySelectorAll('.stat-card');
        
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.12)';
                this.style.transition = 'all 0.3s ease';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.08)';
            });
        });
    }
    
    // 执行所有初始化函数
    setTimeout(() => {
        createMockCharts();
        animateNumbers();
        addCardHoverEffects();
    }, 300);
    
    // 添加导航链接的活动状态管理
    const navLinks = document.querySelectorAll('nav a');
    const currentPath = window.location.pathname;
    
    navLinks.forEach(link => {
        if (link.getAttribute('href') === currentPath.split('/').pop()) {
            link.classList.add('active');
        }
    });
});